class Page{
    constructor(el,options = {}){   //设置默认值，防止没写配置报错
        this.el = document.querySelector(el)
        this.options = options

        // 启动按钮
        this.init()
    }
    init(){
        // 设置父盒子的弹性布局
        this.parentTag()
        // 创建分页标签
        this.createTag()
        // 绑定点击事件
        this.changePage()
        
        

    }
    // 设置父为弹性盒子，主轴交叉轴居中
    parentTag(){
        this.el.style.display = 'flex'
        this.el.style.justifyContent = 'center'
        this.el.style.alignItems = 'center'
    }
    
    // 创建分页标签并追加到页面中
    createTag(){
        // 首先删除之前的重新创建,方便增加点击事件实现页数的跳转
        this.el.innerHTML = ''

        // 步骤：遍历对象，创建标签，放入内容，追加到页面中
        for(let key in this.options.pageTag){
            // console.log(key,this.options.pageTag[key]);
                // spanObj样式的原型方法
            this.createSpan('span',this.options.pageTag[key],this.el)
       
        }
        this.createNum()
       
    }
    // 创建页码
    createNum(){
        // 步骤：获取第三个分页标签，遍历中创建页码标签，追加到第三个分页标签中 (代码重复)
        let thirdSpan = this.el.querySelector('span:nth-of-type(3)')
        //设置第三个的边框为空,padding和margin为0
        thirdSpan.style.border = 'none'
        thirdSpan.style.padding = '0'
        thirdSpan.style.margin = '0'

        // for(let i = 1;i<6;i++){  //代码不灵活，需要计算总页数，
        //     // spanObj样式的原型方法
        //     this.createSpan('span',i,thirdSpan)
        // }

        // 利用算法来计算页码总数,创建页码 (瑕疵:1.总页数小于7,页码不准确;2.动态总页数)
        // 首先要计算totalPage 利用 总信息条数/ 每页显示条数(解决动态总页数)
        this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData / this.options.pageInfo.pageSize)
        // 1 2 3 4 5 ...  99  100   prePage<5
        // 1 2 3 4 5 6 7 ... 99 100 prePage == 5 
        // 1 2 ... 4 5 6 7 8 ... 99 100 prePage > 5 && prePage< 总页数减4
        // 1 2 ... 96 97 98 99 100  prePage >= 总页数减4
        let prePage = this.options.pageInfo.pageNum
        let totalPage =  this.options.pageInfo.totalPage
        // console.log(prePage,totalPage);
        // console.log(666);
        // 增加总页数的页码判断,解决动态总页码小于7时,页码出现的bug
        // 第一个判断为总页码小于7的时候的判断
        if(totalPage<=7){
            for(let i = 1;i<=totalPage;i++){
                this.createSpan('span',i,thirdSpan)
            }
        } else if(prePage < 5){
            for(let i = 1;i <= 5;i++) this.createSpan('span',i,thirdSpan)
            this.createSpan('span','...',thirdSpan)
            this.createSpan('span',totalPage-1,thirdSpan)
            this.createSpan('span',totalPage,thirdSpan)
        } else if(prePage == 5){
            for(let i = 1;i <= 7;i++) this.createSpan('span',i,thirdSpan)
            this.createSpan('span','...',thirdSpan)
            this.createSpan('span',totalPage-1,thirdSpan)
            this.createSpan('span',totalPage,thirdSpan)
        } else if(prePage>5 && prePage < totalPage - 4){
            for(let i = 1;i <= 2;i++) this.createSpan('span',i,thirdSpan)
            this.createSpan('span','...',thirdSpan)
            this.createSpan('span',prePage-2,thirdSpan)
            this.createSpan('span',prePage-1,thirdSpan)
            this.createSpan('span',prePage,thirdSpan)
            this.createSpan('span',prePage+1,thirdSpan)
            this.createSpan('span',prePage+2,thirdSpan)
            this.createSpan('span','...',thirdSpan)
            this.createSpan('span',totalPage-1,thirdSpan)
            this.createSpan('span',totalPage,thirdSpan)
        } else if( prePage >= totalPage - 4){
            for(let i = 1;i <= 2;i++) this.createSpan('span',i,thirdSpan)
            this.createSpan('span','...',thirdSpan)
            this.createSpan('span',totalPage-4,thirdSpan)
            this.createSpan('span',totalPage-3,thirdSpan)
            this.createSpan('span',totalPage-2,thirdSpan)
            this.createSpan('span',totalPage-1,thirdSpan)
            this.createSpan('span',totalPage,thirdSpan)
        }

    }

    //创建span标签,并添加样式，减少代码累赘
    createSpan(son,content,fatherObj){
        let spanObj = document.createElement(son)
        spanObj.style.display = 'inline-block'
        spanObj.style.cursor = 'pointer'
        spanObj.style.userSelect = 'none'
        spanObj.style.borderRadius = '1px'
        spanObj.innerText = content
        spanObj.style.border = '1px solid black'
        spanObj.style.margin = '0 5px'
        spanObj.style.padding = '0 5px'
        fatherObj.appendChild(spanObj)
        // 增加默认选中页
        if(content == this.options.pageInfo.pageNum) spanObj.style.background = 'tomato'
    }

    // 点击更换
    changePage(){
        this.el.onclick = (evt) =>{
            let e = evt ||window.event
            let target = e.target || e.srcElement
            // 判断当前操作的标签,再判断标签的内容实现跳页
            if(target.nodeName === 'SPAN'){
                // console.log(66666);
                switch (target.innerText) {
                    case this.options.pageTag.first:
                        this.options.pageInfo.pageNum = 1
                        // this.createTag() //每个都有,可以统一加
                        this.callBack(this.options.pageInfo.pageNum)
                        break;
                    case this.options.pageTag.prev:
                        if(this.options.pageInfo.pageNum != 1)
                        this.options.pageInfo.pageNum -= 1
                        // this.createTag()
                        this.callBack(this.options.pageInfo.pageNum)
                        break;
                    case this.options.pageTag.next:
                        if(this.options.pageInfo.pageNum != this.options.pageInfo.totalPage)
                        this.options.pageInfo.pageNum += 1
                        // this.createTag()
                        this.callBack(this.options.pageInfo.pageNum)
                        break;
                    case this.options.pageTag.last:
                        this.options.pageInfo.pageNum =  this.options.pageInfo.totalPage 
                        // this.createTag()
                        this.callBack(this.options.pageInfo.pageNum)
                        break;
                    default:
                    // 利用数字返回的值为num,其他的为NaN 来判断当前操作的内容为数字标签
                    if(target.innerText>0){
                        console.log( Number(target.innerText));
                        this.options.pageInfo.pageNum =  Number(target.innerText)
                        this.callBack(this.options.pageInfo.pageNum)
                        
                    }
                    break;
                }
                this.createTag()
                // this.callBack()

            }
            
        }
    }


    callBack(pagenum){
         // 分页开始位置 ： (当前页 - 1) * 每页显示条数   
         // 分页结束位置为【起始位置 +　当前页显示
        document.querySelector('table tbody').innerHTML = ''
        let pageNow = this.options.pageNum
        console.log(333);
        let pagestart = ( pagenum - 1 ) * pageSize
        for(let i = pagestart;i<pageSize + pagestart;i++){
            let trObj = document.createElement('tr')
            trObj.style.textAlign = 'center'
            trObj.innerHTML = `
            <td></td>
            <td>${msgArr[i].id}</td>
            <td>${msgArr[i].name}</td>
            <td>${msgArr[i].age}</td>
            <td>${msgArr[i].gender}</td>
            <td>${msgArr[i].class}</td>
            <td>${msgArr[i].score}</td>
            `
            document.querySelector('table tbody').appendChild(trObj)
        }
    }
}